{% extends 'base.html' %}
{% load url_utils %}

{% block content %}

<div class="right">
    <div class="top">
        <div class="tool">
            <div class="class-info">
              <!-- action提交的路径不能写死，写成 {% url 'grade_list' %}  grade_list是定义url时的name值-->
                <form method="get" action="{% url 'student_list' %}">
                    <!-- <span>学生名称:</span> -->
                    <span>班级:</span>
                    <select name="grade">
                        <option value="" selected="">请选择班级</option>
                        {% for grade in grades %}
                            <option value="{{ grade.pk }}" {% if grade.pk|stringformat:"s" == current_grade %} selected {% endif %}>
                                {{ grade.grade_name }}
                            </option>
                        {% endfor %}
                    </select>
                    <span>学生/学号:</span>
                    <input type="text" name="search" placeholder="搜索学生名称或学籍号..." value="">
                    <input type="submit" value="搜索">
                    <!-- <a href="{% url 'student_create' %}"> -->
                    <button type="button" class="add" id="add">新增</button>
                    {% if request.session.user_role == 'admin' %}
                        <button type="button" class="del" id="del-all">批量删除</button>
                    {% endif %}
                    <button type="button" class="import" id="import">导入</button>
                    <button type="button" class="export" id="export">导出</button>
                    <!-- </a> -->
                </form>
            </div>
        </div>
    </div>
    <div class="bottom">
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="select-all"></th>
                <th>姓名</th>
                <th>班级</th>
                <th>学号</th>
                <th>性别</th>
                <th>生日</th>
                <th>联系电话</th>
                <!-- <th>地址</th> -->
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
          {% for student in students %}
            <tr>
                <td><input type="checkbox" name="student_ids" value="{{ student.pk }}"></td>
                <td>{{ student.student_name }}</td>
                <td>{{ student.grade }}</td>
                <td>{{ student.student_number }}</td>
                <td>{{ student.gender }}</td>
                <td>{{ student.birthday }}</td>
                <td>{{ student.contact_number }}</td>
                <td>
                    <a href="{% url 'student_update' student.pk %}" class="btn btn-primary btn-sm edit">编辑</a>
                    {% if request.session.user_role == 'admin' %}
                        <a href="{% url 'student_delete' student.pk %}" class="btn btn-danger btn-sm del">删除</a>
                    {% endif %}
                </td>
            </tr>
          {% endfor %}
            
        </tbody>
    </table>
  
    <!-- 分页导航 -->
    <div class="pagination">
        <span class="step-links">
            <span class="step-links">
              {% if page_obj.has_previous %}
                  <a href="?{% search_url request page=1 %}">&laquo; 首页</a>
                  <a href="?{% search_url request page=page_obj.previous_page_number %}">上一页</a>
              {% endif %}
  
              <span class="current">
                   {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
              </span>
  
              {% if page_obj.has_next %}
                  <a href="?{% search_url request page=page_obj.next_page_number %}">下一页</a>
                  <a href="?{% search_url request page=page_obj.paginator.num_pages %}">尾页 &raquo;</a>
              {% endif %}
              
          </span>
          
          <div>
              当前页码 {{ page_obj.number }}
              总页数 {{ page_obj.paginator.num_pages }}
          </div>
  
        </span>
    </div>
    </div>
  
  </div>
  
  </div>

  <script>
    // 全选
    document.addEventListener('DOMContentLoaded', function () {
            // 获取全选复选框元素
            const selectAllCheckbox = document.getElementById('select-all');
            
            // 监听全选复选框的点击事件
            selectAllCheckbox.addEventListener('change', function () {
                // 获取所有 name 为 'student_ids' 的复选框
                const studentCheckboxes = document.querySelectorAll('input[name="student_ids"]');
                
                // 根据全选复选框的选中状态设置每个学生复选框的状态
                studentCheckboxes.forEach(function(checkbox) {
                    checkbox.checked = selectAllCheckbox.checked;
                });
            });
        });

    //点击新增
    document.getElementById('add').addEventListener('click',function(){
        Swal.fire({
                position: 'top-end', //设置弹出位置 在 右上角
                html: `<iframe src="{% url 'student_create' %}" width="100%" height="800px" frameborder="0"></iframe>`,
                width: 600,
                showConfirmButton: false,
            });
        });

    //点击编辑
    document.querySelectorAll('.edit').forEach(button => {
        button.addEventListener('click',function(e){
            e.preventDefault(); //阻止跳转
            url = this.getAttribute('href')
            console.log(url)
            Swal.fire({
                position: 'top-end', //设置弹出位置 在 右上角
                html: `<iframe src="${url}" width="100%" height="800px" frameborder="0"></iframe>`,
                width: 600,
                showConfirmButton: false,
            });
        })
    })

    //点击删除
    document.querySelectorAll('.btn-danger').forEach(button => {
        button.addEventListener('click',function(e){
            e.preventDefault(); //阻止跳转
            url = this.getAttribute('href')
            console.log(url)
            Swal.fire({
                title: "确认删除？",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "删除",
                confirmButtonColor: "#d33",
                cancelButtonText: "取消",
            }).then((result)=>{
            if (result.isConfirmed){
                //向后台提交
                fetch(url, {
                method: 'DELETE',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRFToken': '{{ csrf_token }}',
                    },
                })
                .then(response => {
                if (response.status === 401) { // 捕获未授权状态码
                            window.location.href = "{% url 'user_login' %}";
                            return Promise.reject('Session expired');
                        }
                        return response.json()
                })
                .then(data => {
                    console.log(data)
                    if(data.status === 'success'){
                        Swal.fire('删除成功',data.messages,'success');
                        setTimeout(function(){  //延时2秒后刷新页面
                            window.location.reload();
                        },2000)      
                    }else{
                        Swal.fire('删除失败',data.messages,'error');
                    }
                })
            }
        })
        })
    })

    // 批量删除
    document.getElementById('del-all').addEventListener('click', function(){
        // 是否有学生被选择
        const checkboxes = document.querySelectorAll('input[name="student_ids"]:checked');
        if (checkboxes.length === 0) {
            Swal.fire({
                title: "错误",
                text: "请先选择要删除的学生信息",
                icon: "error",
                confirmButtonText: "好的"
            });
            return ;
        }
        // 如果有被选中，则fetch发送请求
        Swal.fire({
            title: "确认删除选中的数据?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "删除",
            confirmButtonColor: "#d33",
            cancelButtonText: "取消",
        })
        .then((result) => {
            if (result.isConfirmed) {
                // 创建一个表单对象
                const formData = new FormData()
                // 遍历所有选择的数据
                checkboxes.forEach((checkbox) => {
                    formData.append('student_ids', checkbox.value)
                })
                fetch("{% url 'student_bulk_delete' %}", {
                    method: 'POST',
                    headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRFToken': '{{ csrf_token }}', 
                        },
                    body: formData                
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                            Swal.fire("Deleted!", data.messages, "success");

                            window.location.reload();
                    } else {
                        Swal.fire("Error!", data.messages, "error")
                    }
                })
            }
        })
    })

    // 导入excel
    document.getElementById('import').addEventListener('click', function() {
        Swal.fire({
            title: '上传学生信息Excel',
            input: 'file', //上传的是 文件file
            inputAttributes: {  //上传参数设置
                'accept': '.xlsx',  // 上传的格式
                'aria-label': '上传你的Excel文件'  //上传的提示
            },
            showCancelButton: true,
            confirmButtonText: '上传',
            showLoaderOnConfirm: true,
            cancelButtonText: '取消',
            preConfirm: (file) => {  //preConfirm 预处理
                // 处理文件上传的逻辑，例如使用 FormData 和 fetch API 上传文件
                const formData = new FormData();
                formData.append('excel_file', file);
                     
                return fetch('{% url "upload_student" %}', {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken':  "{{ csrf_token }}" // 确保添加 CSRF 令牌
                    },
                    body: formData,
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'error') {
                        throw new Error(data.messages); // 直接抛出错误，让 catch 块处理（这里是前端自己抛出的错误）
                    }
                })
                .catch(error => {
                    console.log(error);
                    Swal.showValidationMessage(`${error.messages || error }`);
                });
            },
            //设置了加载，具体效果就是点击上传按钮后，会显示一个Loading状态
            //前面！表示，如果提交完成后，这个Loading状态就会消失
            allowOutsideClick: () => !Swal.isLoading()  
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Uploaded!',
                    text: '上传成功.'
                })
                window.location.reload();
            }
        });        
    })

    // 导出excel 
    document.getElementById('export').addEventListener('click', function() {
        // 检查是否选择了班级
        var select = document.querySelector('select[name="grade"]');
        var value = select.value;
        // gradeText 被选中的班级名称（比如几年几班）
        // select.options 就是下拉框的列表选项，select.selectedIndex就是获取被选中的索引，然后找到对应的被选中的标签，然后.text获取文本
        var gradeText = select.options[select.selectedIndex].text;
        // !value 表示如果选中的值为空，则弹出错误【请选择一个班级！】
        if (!value) {
            Swal.fire({
                title: '错误!',
                text: '请选择一个班级!',
                icon: 'error',
                confirmButtonText: '确定'
            });
            return ;            
        }
        // 提交请求
        Swal.fire({
            title: '确认',
            text: '导出【' + gradeText + '】学生信息',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: '确认',
            cancelButtonText: '取消'
        }).then((result) => {
            if (result.isConfirmed) {
                // 发送请求
                fetch('{% url "export_excel" %}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': '{{ csrf_token }}'
                    }, 
                    // 只需要传递班级的ID即可，因此使用 application/json
                    // 那么注意传递的是JSON格式，使用 JSON.stringify 序列化，把 {grade: value} 转成JSON传递即可
                    body: JSON.stringify({grade: value})
                })
                .then(response => {
                    // !response.ok 判断返回的数据状态不是200，则提示【下载失败】
                    if (!response.ok) {
                        response.json().then(result => {
                            Swal.fire({
                                title: '下载失败',
                                text: '服务器错误: ' + result.messages,
                                icon: 'error',
                                confirmButtonText: '关闭'
                            });
                        });
                        throw new Error('网络或服务器错误');
                    }
                    return response.blob();  // blob 二进制文件
                })
                .then(blob => {
                    // 其实下面就相当于你手动点击超链接然后下载文件一样，都是充分利用了浏览器的特性进行下载
                    // 创建一个对象，接收二进制文件blob
                    const url = window.URL.createObjectURL(blob);
                    // 创建一个a标签
                    const a = document.createElement('a');
                    // 设置a标签不显示
                    a.style.display = 'none';
                    a.href = url;   // 设置a标签的地址
                    a.download =  gradeText + '.xlsx'; // 设置a标签的下载文件的名称
                    // 然后把 a标签的内容追加到我们创建的 document body 中，并且让它自动点击，点击的时候会根据浏览器的特性去进行下载
                    document.body.appendChild(a);  
                    a.click();
                    // 清理并移除元素(下载完之后就移除)
                    document.body.removeChild(a);
                    window.URL.revokeObjectURL(url);
                })
                .catch(error =>{
                    console.error('下载失败',error)
                    Swal.fire({
                        title: '错误',
                        text: '下载出现问题，请稍后再试',
                        icon: 'error',
                        confirmButtonText: '关闭'
                    })
                })
            }
        })


    })

</script>

{% endblock %}
